<ion-header>
    <ion-toolbar>
        <ion-title>
            <h1>{{ 'addon.mod_imscp.toc' | translate }}</h1>
        </ion-title>
        <ion-buttons slot="end">
            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                <ion-icon name="fas-xmark" slot="icon-only" aria-hidden="true" />
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
    <nav>
        <ion-list>
            <ion-item *ngFor="let item of items" (click)="loadItem(item.href)"
                [attr.aria-current]="selected === item.href ? 'page' : 'false'" button [detail]="false">
                <ion-label [class.core-bold]="!item.href">
                    <p class="item-heading">
                        <span class="ion-padding-start" *ngFor="let i of getNumberForPadding(item.level)"></span>
                        {{item.title}}
                    </p>
                </ion-label>
            </ion-item>
        </ion-list>
    </nav>
</ion-content>
